// pages/shareFriendTest/shareFriendTest.js
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },


  // 点击分享朋友圈
  btn_sub: function (res) {
    console.log("点击分享朋友圈");
    // 声明一个变量接收用户授权信息
    var userinfos = res.detail.userInfo;
    // 判断是否授权  true 替换微信用户头像
    if (userinfos != undefined) {
      console.log("获得微信用户头像-和名字");
      console.log(userinfos);
      this.setData({
        avatarUrl: userinfos.avatarUrl,
        nickName: userinfos.nickName,
      })
    }

    wx.cloud.downloadFile({
      fileID:'cloud://xcx-test-05c56c.7863-xcx-test-05c56c/headimg.jpeg',
      success:res1 =>{
        console.log("获得微信用户头像下载");
        //缓存头像图片
        this.setData({
          portrait_temp: res1.tempFilePath
        })
        //缓存二维码
        wx.cloud.downloadFile({
          fileID:'cloud://xcx-test-05c56c.7863-xcx-test-05c56c/gh_6c52c7019dc3_258.jpg',
          success:res2 =>{
            console.log('二维码：' + res2.tempFilePath)
            //缓存二维码
            this.setData({
              qrcode_temp: res2.tempFilePath
            })
            console.log('开始绘制图片')
            this.drawImage();
            console.log('制作完成')
          }
        })
      }
    })

  },

  drawImage:function() {
    console.log('绘制canvas图片')
    //绘制canvas图片
    var that = this
    const ctx = wx.createCanvasContext('myCanvas')
    var bgPath = '../../images/friendshare.jpg'
    var portraitPath = that.data.portrait_temp
    var hostNickname = that.data.nickName

    var qrPath = that.data.qrcode_temp
    var windowWidth = 750
    that.setData({
      scale: 1.6
    })
    //绘制背景图片
    ctx.drawImage(bgPath, 0, 0, windowWidth, that.data.scale * windowWidth)

    //绘制头像
    ctx.save()
    ctx.beginPath()
    ctx.arc(windowWidth / 2, 0.32 * windowWidth, 0.15 * windowWidth, 0, 2 * Math.PI)
    ctx.clip()
    ctx.drawImage(portraitPath, 0.7 * windowWidth / 2, 0.17 * windowWidth, 0.3 * windowWidth, 0.3 * windowWidth)
    ctx.restore()
    //绘制第一段文本
    ctx.setFillStyle('#ffffff')
    ctx.setFontSize(0.037 * windowWidth)
    ctx.setTextAlign('center')
    ctx.fillText(hostNickname + ' 正在参加疯狂红包活动', windowWidth / 2, 0.52 * windowWidth)

    //绘制第二段文本
    ctx.setFillStyle('#ffffff')
    ctx.setFontSize(0.037 * windowWidth)
    ctx.setTextAlign('center')
    ctx.fillText('邀请你一起来领券抢红包啦~', windowWidth / 2, 0.57 * windowWidth)

    //绘制二维码
    ctx.drawImage(qrPath, 0.64 * windowWidth / 2, 0.75 * windowWidth, 0.36 * windowWidth, 0.36 * windowWidth)
    //绘制第三段文本
    ctx.setFillStyle('#ffffff')
    ctx.setFontSize(0.037 * windowWidth)
    ctx.setTextAlign('center')
    ctx.fillText('长按二维码领红包', windowWidth / 2, 1.36 * windowWidth)
    ctx.draw();
    var that = this;
    // this.canvasToImage()
    setTimeout(function () {
      that.canvasToImage()
      console.log('开始绘制图片转出图片')
    }, 200)
  },

  canvasToImage:function() {
    var that = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.windowWidth,
      height: that.data.windowWidth * that.data.scale,
      destWidth: that.data.windowWidth * 4,
      destHeight: that.data.windowWidth * 4 * that.data.scale,
      canvasId: 'myCanvas',
      success: function (res) {
        console.log('朋友圈分享图生成成功:' + res.tempFilePath)
        wx.previewImage({
          current: res.tempFilePath, // 当前显示图片的http链接
          urls: [res.tempFilePath] // 需要预览的图片http链接列表
        })
         wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: res=>{
              wx.showLoading({
                title: ' 保持成功',
                icon:'success'
              })
            }
          })
      },
      fail: function (err) {
        console.log('失败')
        console.log(err)
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})